﻿@{
    ViewData["Title"] = "用户管理";
}
 
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto search" lay-filter="app-content-list">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">登录名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="loginName" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="cellPhone" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="email" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-list" id="searchBut" lay-submit="" lay-filter="search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
                            </button>
                            <button onclick="add()" class="layui-btn">添加</button>
                        </div>
                    </div>
                </div>

                <div class="layui-card-body">                    
                    <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
                </div>
            </div>
        </div>

 


<script>


    //分模块加载js
    var $ = layui.$
        , view = layui.view
        , table = layui.table
        ,layer = layui.layer
        , form = layui.form,
        element = layui.element;


    //设置菜单
    $('#m_user').addClass("layui-this");
    $('#m_system').addClass("layui-nav-itemed");


    //监听搜索
    form.on('submit(search)', function (data) {
        var field = data.field;
        
        //执行重载
        table.reload('LAY-app-content-list', {
            where: field
        });
    });

    $(document).on('keydown', function (e) {  //document为当前元素，限制范围，如果不限制的话会一直有事件
        
        if (e.keyCode == 13) {
            $("#searchBut").click();
        }
    })


    //加载table
    var tableObj = table.render({
        elem: '#LAY-app-content-list'
        , url: '/user/list' //模拟接口
        , page: true
        , cellMinWidth: 80
        ,height:'full-110'
        , cols: [[
            { field: 'name', sort: false, title: '姓名',  templet: '<div>{{ d.name}}</div>' }
            , { field: 'loginName', sort: false, title: '登录名', templet: '<div>{{ d.loginName}}</div>' }
            , { field: 'depart', sort: false, title: '部门', templet: '<div>{{ getDepart(d.depart)}}</div>' }
            , { field: 'cellphone', sort: false, title: '手机号', templet: '<div>{{ getString(d.cellphone)}}</div>' }
            , { field: 'email', sort: false, title: '邮箱', templet: '<div>{{getString( d.email)}}</div>' }
            , {
                field: 'opr', title: '操作',width:150,
                templet: '<div class="layui-table-cell laytable-cell-11-0-8"> <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="edit(\'{{ d.id }}\')"><i class="layui-icon layui-icon-edit"></i>编辑</a>  <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteItem(\'{{ d.id }}\')"><i class="layui-icon layui-icon-delete"></i>删除</a> </div>'
            }

            ]]
            , skin: 'line'
        });

    //新增用户
    function add() {
        $.get("/user/create", function (str) {
            var index = layer.open({
                type: 1,
                title:'新增用户',
                content: str,
                area: ["500px", "480px"]
            });

            form.render("", 'createForm');

            //监听提交
            form.on('submit(create)', function (data) {
                var field = data.field; //获取提交的字段

                //获取选中的role
                var roles = getSelectRoles();
                field.roles = roles;

                $.post("/user/doCreate", field, function (d) {
                    layer.msg(d.msg);
                    if (d.code == 1) {
                        tableObj.reload();
                        layer.close(index)
                    }
                    
                });

            });
        });
    }

    function getDepart(d) {
        if (d != null) {
            return d.name;
        } else {
            return "";
        }
    }

    function getSelectRoles() {
        var selectedRole = [];
        $.each($('input[name=role]:checkbox:checked'), function () {
            selectedRole.push($(this).val());
        });
        return selectedRole;
    }

    //编辑用户
    function edit(id) {
        $.get("/user/edit?id="+id, {}, function (str) {
            var index = layer.open({
                type: 1,
                content: str,
                area: ["500px", "480px"]
            });

            form.render("", 'editForm');

            //监听提交
            form.on('submit(edit)', function (data) {
                var field = data.field; //获取提交的字段

                //获取选中的role
                var roles = getSelectRoles();
                field.roles = roles;

                $.post("/user/doEdit", field, function (d) {
                    layer.msg(d.msg);
                    if (d.code == 1) {
                        tableObj.reload();
                        layer.close(index)
                    }
                    
                });

            });
        });
    }

    function deleteItem(id) {
        layer.confirm("确定要删除吗？", function (index) {
            layer.close(index);
            $.post("/user/delete?id=" + id, function (d) {
                layer.msg(d.msg);
                if (d.code == 1) {
                    tableObj.reload();
                }
            });
        });
    }

</script>

